<template>
    <div class="w-full h-full flex-center flex-col">
        <div id="login_cont" class="min-w-[1000px] h-[80vh] rounded-xl overflow-hidden flex">
            <div class="flex-1 h-full">
                <img class="w-full h-full" src="/public/login/login_pic.png" alt="">
            </div>
            <div class="flex-1 flex-center flex-col">
                <div class="w-96">
                    <div class="text-3xl mb-10">物流管理系统</div>
                    <div class="text-sm text-gray-400 mb-6">账号密码登录</div>
                    <a-form :model="formState">
                        <a-form-item name="username" :rules="[{ required: true, message: '请输入账号' }]">
                            <a-input size="large" v-model:value="formState.username" placeholder="请输入账号">
                                <template #prefix>
                                    <UserOutlined />
                                </template>
                            </a-input>
                        </a-form-item>

                        <a-form-item name="password" :rules="[{ required: true, message: '请输入密码' }]">
                            <a-input-password size="large" v-model:value="formState.password" placeholder="请输入密码">
                                <template #prefix>
                                    <LockOutlined class="site-form-item-icon" />
                                </template>
                            </a-input-password>
                        </a-form-item>

                        <a-form-item name="verificationCode" :rules="[{ required: true, message: '请输入验证码' }]">
                            <a-input size="large" class="w-[60%]" v-model:value="formState.verificationCode"
                                placeholder="请输入验证码">
                                <template #prefix>
                                    <SafetyOutlined />
                                </template>
                            </a-input>
                        </a-form-item>

                        <a-form-item>
                            <a-button :loading="loading" :disabled="disabled" class="w-full mt-12 flex-center"
                                @click.prevent="onSubmit" type="primary" html-type="submit" size="large">登录</a-button>
                        </a-form-item>
                    </a-form>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { UserOutlined, LockOutlined, SafetyOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';

const router = useRouter()

const formState = reactive({
    username: '',
    password: '',
    verificationCode: ''
})
const loading = ref(false)

const onSubmit = () => {
    loading.value = true
    setTimeout(() => {
        message.success('登录成功');
        setTimeout(() => {
            router.push('/dashboard')
        }, 500)
    },800)
}

const disabled = computed(() => {
    return !formState.username || !formState.password || !formState.verificationCode
})
</script>

<style scoped lang="scss">
#login_cont {
    box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.05);
}

:deep(.ant-form) {
    .ant-input {
        width: 90%;
    }
}
</style>